<template>
  <div class="system-log">
    <!-- Header Section -->
    <el-card class="header-card">
      <div class="header-content">
        <div class="left">
          <h2 class="title">系统日志</h2>
          <p class="subtitle">查看和分析系统运行日志</p>
        </div>
        <div class="right">
          <el-button
            type="primary"
            :style="{ backgroundColor: '#4834d4' }"
            @click="handleExport"
          >
            <el-icon><Download /></el-icon>导出日志
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- Statistics Cards -->
    <div class="statistics-container">
      <el-card v-for="stat in statistics" :key="stat.title" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :style="{ color: stat.color }">
            <component :is="stat.icon" />
          </el-icon>
          <div class="stat-info">
            <span class="stat-value">{{ stat.value }}</span>
            <span class="stat-title">{{ stat.title }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- Log Chart -->
    <el-card class="chart-card">
      <div ref="chartRef" class="log-chart"></div>
    </el-card>

    <!-- Filter Section -->
    <el-card class="filter-card">
      <div class="filter-content">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="日志级别">
            <el-select
              v-model="filterForm.level"
              placeholder="选择级别"
              clearable
            >
              <el-option
                v-for="level in logLevels"
                :key="level.value"
                :label="level.label"
                :value="level.value"
              >
                <el-tag :type="level.tagType" size="small">{{
                  level.label
                }}</el-tag>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="操作模块">
            <el-select
              v-model="filterForm.module"
              placeholder="选择模块"
              clearable
            >
              <el-option label="用户管理" value="user" />
              <el-option label="系统配置" value="config" />
              <el-option label="任务调度" value="task" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">筛选</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- Log Table -->
    <el-card class="table-card">
      <el-table :data="logData" style="width: 100%" :max-height="600">
        <el-table-column prop="timestamp" label="时间" width="180" sortable />
        <el-table-column prop="level" label="级别" width="100">
          <template #default="{ row }">
            <el-tag :type="getLogLevelType(row.level)" size="small">
              {{ row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="module" label="模块" width="120" />
        <el-table-column prop="operation" label="操作" width="150" />
        <el-table-column
          prop="message"
          label="日志内容"
          min-width="300"
          show-overflow-tooltip
        />
        <el-table-column prop="ip" label="IP地址" width="140" />
        <el-table-column prop="user" label="操作人" width="120" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" @click="showLogDetail(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
        />
      </div>
    </el-card>

    <!-- Log Detail Dialog -->
    <el-dialog v-model="showDetailDialog" title="日志详情" width="700px">
      <div v-if="selectedLog" class="log-detail">
        <div class="detail-item" v-for="(value, key) in selectedLog" :key="key">
          <span class="detail-label">{{ key }}：</span>
          <span class="detail-value">{{ value }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 统计数据
const statistics = [
  { title: '今日日志总数', value: '1,234', icon: 'Info', color: '#4834d4' },
  { title: '错误日志数', value: '12', icon: 'CircleClose', color: '#dc3545' },
  { title: '告警日志数', value: '48', icon: 'Warning', color: '#ffc107' },
  {
    title: '系统正常运行时间',
    value: '99.9%',
    icon: 'CircleCheck',
    color: '#28a745'
  }
]

// 日志级别配置
const logLevels = [
  { label: '错误', value: 'ERROR', tagType: 'danger' },
  { label: '警告', value: 'WARN', tagType: 'warning' },
  { label: '信息', value: 'INFO', tagType: 'info' },
  { label: '调试', value: 'DEBUG', tagType: '' }
]

// 筛选表单
const filterForm = ref({
  level: '',
  timeRange: '',
  module: ''
})

// 分页配置
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(100)

// 图表相关
const chartRef = ref(null)
let chart = null

// 日志详情相关
const showDetailDialog = ref(false)
const selectedLog = ref(null)

// 模拟日志数据
const logData = ref([
  {
    timestamp: '2024-02-10 10:00:00',
    level: 'ERROR',
    module: '用户管理',
    operation: '用户登录',
    message: '用户登录失败，密码错误',
    ip: '192.168.1.100',
    user: 'admin'
  }
  // ... 更多日志数据
])

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return

  chart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: '日志统计趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['错误', '警告', '信息']
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '错误',
        type: 'line',
        data: [5, 2, 3, 4, 1, 2, 3],
        itemStyle: { color: '#dc3545' }
      },
      {
        name: '警告',
        type: 'line',
        data: [10, 12, 8, 9, 11, 13, 10],
        itemStyle: { color: '#ffc107' }
      },
      {
        name: '信息',
        type: 'line',
        data: [100, 120, 90, 110, 135, 150, 120],
        itemStyle: { color: '#4834d4' }
      }
    ]
  }

  chart.setOption(option)
}

// 获取日志级别对应的标签类型
const getLogLevelType = (level) => {
  const levelMap = {
    ERROR: 'danger',
    WARN: 'warning',
    INFO: 'info',
    DEBUG: ''
  }
  return levelMap[level] || ''
}

// 处理函数
const handleFilter = () => {
  // 实现筛选逻辑
  ElMessage.success('筛选成功')
}

const resetFilter = () => {
  filterForm.value = {
    level: '',
    timeRange: '',
    module: ''
  }
}

const handleExport = () => {
  ElMessage.success('日志导出成功')
}

const showLogDetail = (row) => {
  selectedLog.value = row
  showDetailDialog.value = true
}

// 生命周期钩子
onMounted(() => {
  initChart()
  window.addEventListener('resize', () => {
    chart?.resize()
  })
})
</script>

<style lang="scss" scoped>
.system-log {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .title {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
        }

        .subtitle {
          margin: 8px 0 0;
          color: #666;
          font-size: 14px;
        }
      }
    }
  }

  .statistics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-icon {
          font-size: 32px;
          padding: 12px;
          border-radius: 8px;
          background: #f8f9fa;
        }

        .stat-info {
          display: flex;
          flex-direction: column;

          .stat-value {
            font-size: 24px;
            font-weight: 600;
          }

          .stat-title {
            color: #666;
            font-size: 14px;
          }
        }
      }
    }
  }

  .chart-card {
    margin-bottom: 20px;

    .log-chart {
      height: 300px;
    }
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.log-detail {
  .detail-item {
    margin-bottom: 12px;

    .detail-label {
      font-weight: 500;
      margin-right: 8px;
    }

    .detail-value {
      color: #666;
    }
  }
}

// 自定义主题色
:deep(.el-button--primary) {
  --el-button-hover-bg-color: #3a2aa8;
  --el-button-hover-border-color: #3a2aa8;
}
</style>
